<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta http-equiv="Content-Type" content='text/html; charset=UTF-8' />
                <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>   

                <title><h:outputText value="Google Maps" /></title>
            </f:facet> 
            <h:outputScript library="primefaces" name="gmap/gmap.js" />
        </h:head>
        <h:body>
            <h:form>
                <h:outputText value="MAPAAAA" />
                <p:growl id="growl" showDetail="true"/>

                <p:gmap widgetVar="gmap" center="-22.902635,-43.219841" zoom="13" type="HYBRID"  model="#{mapBean.draggableModel}" style="width:600px;height:400px">
                    <p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}" update="growl" />
                </p:gmap>
                <p:gmapInfoWindow>  
                    <p:outputPanel style="text-align:center;display:block;margin:auto:">  

                        <p:graphicImage value="/images/#{mapBean.marker.data}" height="150"/>  
                        <br />  
                        <h:outputText value="#{mapBean.marker.title}" />  

                    </p:outputPanel>  

                </p:gmapInfoWindow>
            </h:form>

        </h:body>
    </f:view>
</html>

